<template>
    <div id="container">
        <div id="btnDiv">
            <div class="el-row--flex">
                <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期查询">
                </el-date-picker>
                <el-button icon="el-icon-search" circle @click="queryDataByDate" class="search_btn"></el-button>
                <el-input v-model="username" placeholder="根据学号进行模糊查询"></el-input>
                <el-button icon="el-icon-search" circle @click="queryDataByUsername" class="search_btn"></el-button>
            </div>
            <el-button type="primary" round style="margin:20px;" @click="getAllSubmit">查看所有打卡数据</el-button>
            <el-button type="danger" round style="margin:20px;" @click="getAbnormalTemperature">异常体温筛选</el-button>
            <el-button type="warning" round style="margin:20px;" @click="getUncommitted">查看未打卡</el-button>
            <el-button type="primary" round style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
        </div>
        <el-table
                @selection-change="handleSelectionChange"
                :data="tableData"
                stripe
                style="width: 100%">

            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户ID"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="学号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="telephoneNumber"
                    label="手机号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="identityNumber"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="temperature"
                    label="体温"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="填报日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="isSubmit"
                    label="是否提交"
                    width="180">
            </el-table-column>
        </el-table>

        <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="selectData" id="selectTable" height="380px">
                <el-table-column
                        prop="userId"
                        label="用户ID"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="学号"
                >
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="telephoneNumber"
                        label="手机号码"
                >
                </el-table-column>
                <el-table-column
                        prop="identityNumber"
                        label="身份证号"
                >
                </el-table-column>
                <el-table-column
                        prop="temperature"
                        label="体温"
                >
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="填报日期"
                >
                </el-table-column>
                <el-table-column
                        prop="isSubmit"
                        label="是否提交"
                >
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import htmlToExcel from '@/utils/htmlToExcel'
export default {
    name: "SubmitManage",
    mounted() {
        var vm = this;
        this.axios({
            url: '/myapi/todaySubmit',
            method: 'get'
        }).then(function (response) {
            if(response.data.code===200){
                vm.tableData = response.data.data.todaySubmitData;
            }
            else if(response.data.code===2001){
                vm.$message.error('你还未登录!');
                //路由回管理员后台登录页面
                vm.$router.push("/adminLogin")
            }
            else if(response.data.code===4001){
                vm.$message.error('无权限!');
                //路由回管理员后台登录页面
                vm.$router.push("/adminLogin")
            }
        });
    },
    data(){
        return {
            //学号:用于模糊查询
            username: '',
            value1: '',
            tableData: [],
            selectData:[],
            selectWindow:false
        }
    },
    methods:{
        queryDataByUsername(){
            console.log(this.username);
            var vm = this;
            this.axios({
                url: '/myapi/queryByUsername',
                data: {
                    submitList: vm.tableData,
                    username: vm.username
                },
                method: 'post'
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data.data.mohuData);
                    vm.tableData = response.data.data.mohuData;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        queryDataByDate(){
            console.log(this.value1);
            var vm = this;
            this.axios({
                url: '/myapi/dateSubmit',
                params: {
                    date: vm.value1
                },
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.tableData = response.data.data.dateSubmitData;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        getAllSubmit(){
            var vm = this;
            this.axios({
                url: '/myapi/allSubmit',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.tableData = response.data.data.allSubmitData;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        getAbnormalTemperature(){
            console.log(this.tableData);
            var vm = this;
            this.axios({
                url: '/myapi/abnormalTemperature',
                //使用data是body传参，使用params是query传参也就是get的问号?传参
                data:vm.tableData,
                method: 'post'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.tableData = response.data.data.abnormalTemperature;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        getUncommitted(){
            console.log(this.tableData);
            var vm = this;
            this.axios({
                url: '/myapi/uncommitted',
                //使用data是body传参，使用params是query传参也就是get的问号?传参
                data:vm.tableData,
                method: 'post'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.tableData = response.data.data.uncommitted;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        exportExcel() {
            htmlToExcel.getExcel('#selectTable','导出的自定义标题')
        },
        exportExcelSelect(){
            if (this.selectData.length < 1){
                this.$message.error('请选择要导出的内容！');
                return false;
            }
            this.selectWindow = true;
        },
        handleSelectionChange(val) {
            this.selectData = val;
        }
    }
}
</script>

<style scoped>
    .search_btn{
        margin-left: 10px;
        margin-right: 10px;
    }
</style>
